
<template>
    <ContentWrap>
        <el-form :model="query" class="mb-20px" @submit.enter.prevent="queryFirstHandle">
            <ElRow :gutter="20" justify="space-between">
                <ElCol :span="14">
                    <div class="">
                        <el-button type="primary" @click="setModalVisible.crud = true">添加站点</el-button>
                    </div>
                </ElCol>
                <ElCol class="" :span="10">
                    <div class="flex justify-end">
                        <el-input class="max-w-[200px]" clearable v-model="query.keyword" placeholder="请输入域名或备注">
                            <template #suffix>
                                <Icon icon="ant-design:search-outlined" :size="18"></Icon>
                            </template>
                        </el-input>
                    </div>
                </ElCol>
            </ElRow>
        </el-form>
      
        <el-table
:data="pageData.list" v-loading="loading" header-row-class-name="cc-table" border
            highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="domainName" label="网站名" width="250" show-overflow-tooltip />
            <el-table-column prop="rootDir" label="根目录" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="160">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="setHandle(scope.row)">设置</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="flex justify-end p-t-10px">
            <el-pagination
v-model:current-page="queryPage.pageNumber" v-model:page-size="queryPage.pageSize"
                :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageData.total"
                @size-change="queryFirstHandle" @current-change="searchHandle" />
        </div>
    </ContentWrap>
    <Setting v-model="setModalVisible.Setting" :info="detailInfo" />
    <infoModal v-model="setModalVisible.crud" @confirm="searchHandle"></infoModal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getPhpWebListAPI } from "@/api/systemMonitor/site"

import { ElMessage, ElMessageBox } from 'element-plus'
import Setting from "./Setting.vue"
import infoModal from "./infoModal.vue"

//table loading
const loading = ref(false)

//模态框控制
const setModalVisible = reactive({
    Setting: false,
    crud:false,
})

//详情数据
const detailInfo = ref(undefined)

//默认查询条件
const defaultQuery = {
    keyword: ""
}
let query = reactive({
    ...defaultQuery
})

const queryPage = reactive({
    pageNumber: 1,
    pageSize: 10
})
const pageData = reactive({
    list: null,
    total: 0
})

onMounted(() => {
    queryFirstHandle()
})

//查询第一页
const queryFirstHandle = () => {
    queryPage.pageNumber = 1
    searchHandle()
}
//重置
const queryResetHandle = () => {
    query = Object.assign(query, defaultQuery)
    queryFirstHandle();
}
//查询
const searchHandle = () => {
    loading.value = true;
    getPhpWebListAPI({ ...queryPage, ...query }).then((res) => {
        pageData.list = res.data.list
        pageData.total = res.data.total
    }).finally(() => {
        loading.value = false;
    })
}

//设置
const setHandle = (row) => {
    detailInfo.value = row;
    setModalVisible.Setting = true;
}
</script>
